<template>
  <div class="show-message" v-if="visiable">
    <img class="bg-img" src="@/assets/football/排行榜背景.jpg" alt="" />
    <div class="content">
      <div class="left">
        <div class="title">赛前预言</div>
        <div class="zuo"  v-if="preList.length > 0">
          <div
            class="txt"
            v-for="(item, i) in preList"
            :style="`${item.best_pre_prediction == 1?'background-color:red;color:yellow;font-weight:bolder':''}`"
          >
            <div class="name" v-if="i % 2 == 0">
              {{ item.username }}
              <img
                v-if="item.best_pre_prediction == 1"
                class="best"
                src="@/assets/football/best.png"
                alt=""
              /><img
                v-if="item.best_pre_prediction == 1"
                class="best dangao"
                src="@/assets/football/蛋糕.png"
                alt=""
              />
            </div>
            <div class="text" >
              {{ item.pre_match_comments }}
            </div>
            <div class="name" v-if="i % 2 != 0">
              {{ item.username
              }}<img
                v-if="item.best_pre_prediction == 1"
                class="best"
                src="@/assets/football/best.png"
                alt=""
              /><img
                v-if="item.best_pre_prediction == 1"
                class="best dangao"
                src="@/assets/football/蛋糕.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div v-else class="no-data">
          <span class="txt">暂无数据</span>
        </div>
      </div>
      <div class="left">
        <div class="title">赛后点评</div>
        <div class="zuo" v-if="afterList.length > 0">
          <div class="txt" v-for="(item, i) in afterList" :style="`${item.best_after_comments == 1?'background-color:red;color:yellow;font-weight:bolder':''}`">
            <div class="name" v-if="i % 2 == 0">
              {{ item.username
              }}<img
                class="best"
                v-if="item.best_after_comments == 1"
                src="@/assets/football/best.png"
                alt=""
              />
              <img
                v-if="item.best_after_comments == 1"
                class="best dangao"
                src="@/assets/football/蛋糕.png"
                alt=""
              />
            </div>
            <div class="text">
              {{ item.post_match_comments }}
            </div>
            <div class="name" v-if="i % 2 != 0">
              {{ item.username
              }}<img
                class="best"
                v-if="item.best_after_comments == 1"
                src="@/assets/football/best.png"
                alt=""
              />
              <img
                v-if="item.best_after_comments == 1"
                class="best dangao"
                src="@/assets/football/蛋糕.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div v-else class="no-data">
          <span class="txt">暂无数据</span>
        </div>
      </div>
    </div>
    <i class="el-icon-circle-close close-message-btn" @click="close()"></i>
    <img
      class="close-message"
      src="@/assets/football/足球.png"
      @click="close()"
      alt=""
    />
  </div>
</template>
<script>
import { getCommentList } from "@/api/football";
import { compareObj } from "@/utils/football-count";
export default {
  data() {
    return {
      visiable: false,
      commentList: [],
      preList: [],
      afterList: [],
      id:0
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.$on("show", function (id) {
        
        this.visiable = true;
        console.log(id);
        this.id = id;
        this.commentList = [];
        this.preList = [];
        this.afterList = [];
        getCommentList({ matchId: id }).then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.commentList = res.data;
            this.preList = this.commentList.filter((item) => {
              return item.pre_match_comments != "";
            });
            this.afterList = this.commentList.filter((item) => {
              return item.post_match_comments != "";
            });
            this.preList.sort(compareObj("best_pre_prediction"))
            this.afterList.sort(compareObj("best_after_comments"))
          }
        });
      });
    });
  },
  methods: {
    close() {
      this.visiable = false;
      this.$comment.createPoint({
        tableName: "football",
        moduleName: "竞猜页面查看信息" + this.id,
        pageName: "/club/footballApply/message",
        eventName: "leave",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    },
    getPre(arr, type) {
      return arr.filter((item) => {
        return (
          item[
            `${type === 1 ? "pre_match_comments" : "post_match_comments"}`
          ] != ""
        );
      });
    },
    getPos() {
      let widthArr = [250, 260, 270, 300];
      let radiusArr = [0, 20, 50, 100];
      let bgArr = ["red", "yellow", "green", "black"];
      let colorArr = ["black", "green", "yellow", "red"];
      let suiji1 = Math.floor(Math.random() * widthArr.length);
      let w = widthArr[suiji1];
      let radius = radiusArr[suiji1];

      let suiji2 = Math.floor(Math.random() * bgArr.length);
      let bg = bgArr[suiji2];
      let color = colorArr[suiji2];
      //   debugger
      //   str = `width:${w}px;height:${w}px;background-color:${color}`;
      //   str = "width:70px;height:70px;background-color:red"
      return `background-color:${bg};color:${color};border-radius:${radius}%;padding:20px;display:block;margin:5px 0`;
    },
  },
};
</script>
<style lang="stylus">
.show-message {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(1, 1, 1, 0.8);
  z-index: 99999;

  .bg-img {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 0;
  }

  .close-message-btn {
    width: 50px;
    position: absolute;
    left: 50%;
    top: 70%;
    margin-left: -85px;
    margin-top: 20px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    color: red;
    font-size: 200px;
    opacity: 0.01;
    z-index: 99999;
  }

  .close-message-btn:hover {
    opacity: 0.3;
  }

  .close-message {
    width: 50px;
    position: absolute;
    left: 50%;
    top: 70%;
    margin-left: -30px;
    // transform: translate(-50%, -50%);
    // cursor: pointer;
    animation: zhuan 15s infinite linear;
  }

  @keyframes zhuan {
    0% {
      transform: rotate(0deg) translateY(0) scale(0.2);
    }

    50% {
      transform: rotate(720deg) translateY(100px) scale(1);
    }

    100% {
      transform: rotate(1440deg) translateY(0px) scale(0.2);
    }
  }

  .content {
    width: 100%;
    height: 100%;
    padding: 20px 60px;
    position: absolute;

    .left:nth-child(1) {
      transform: translateX(-20px);
    }

    // border: 1px solid red;
    .left {
      width: 50%;
      height: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      padding: 20px 40px;

      .no-data {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        color: white;

        .txt {
          animation: zhuan 30s infinite linear;
          border-radius: 30px;
        }
      }

      .title {
        width: 100%;
        flex-basis: 50px;
        line-height: 50px;
        text-align: center;
        color: black;
        font-size: 40px;
        font-weight: bolder;
        letter-spacing: 20px;
        text-shadow: 5px 5px 5px white;
        opacity: 0.8;
      }

      .zuo {
        flex: 1;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 1px;
        }

        &::-webkit-scrollbar-thumb {
          // background: #3f3f3f;
          background: transparent;
          border-radius: 10px;
        }

        &::-webkit-scrollbar-track-piece {
          background: transparent;
        }

        .txt:nth-child(odd) {
          background-color: #f8d89f;
          box-shadow: 10px 10px 8px green;

          .name {
            border-right: 1px solid black;

            .best {
              width: 60px;
              position: absolute;
              left: -20px;
              top: -20px;
            }
            .dangao{
              width: 40px;
              position: absolute;
              left: 50px;
              top: -25px;
            }
          }
        }

        .txt:nth-child(even) {
          background-color: green;
          color: white;
          box-shadow: -5px 10px 8px #f8d89f;

          .name {
            border-left: 1px solid white;

            .best {
              width: 60px;
              position: absolute;
              right: -20px;
              top: -20px;
            }
            .dangao{
              width: 40px;
              position: absolute;
              right: 50px;
              top: -25px;
            }
          }
        }

        .txt {
          margin: 30px 10px;
          padding: 10px;
          // opacity: 0.5;
          border-radius: 15px;
          display: flex;
          color: black;

          .name {
            position: relative;
            flex-basis: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bolder;
          }

          .text {
            flex: 1;
            padding: 15px;
            letter-spacing: 2px;
            line-height: 23px;
          }
        }
      }
    }

    .right {
      width: 50%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      float: left;
    }
  }
}
</style>